<template>
  <div class="data-box">
    <parking-header viewTitle="宿迁网络安全基础平台"></parking-header>
    <div class="income-analysis-content">
      <div class="cherries">
        <div
          class="cherries-item"
          v-for="(item, index) in sumInfodata"
          :key="index"
        >
          <summary-box :sumInfo="item"></summary-box>
        </div>
      </div>
      <!-- 地图 -->
      <div id="mapChart" ref="map_ref">
        <map-display></map-display>
      </div>
      <div class="mydata1">
        <my-data-three></my-data-three>
      </div>
      <div class="mydata2">
        <my-data-five></my-data-five>
      </div>
      <div class="mydata3">
        <my-data-one></my-data-one>
      </div>
      <div class="mydata4">
        <my-data-six></my-data-six>
      </div>
      <div class="mydata5">
        <my-data-two></my-data-two>
      </div>
      <div class="mydata6">
        <my-data-four></my-data-four>
      </div>
      <div class="mydata7">
        <my-data-seven></my-data-seven>
      </div>
    </div>
  </div>
</template>

<script>
import ParkingHeader from "../components/ParkingHeader.vue";
import SummaryBox from "../components/SummaryBox.vue";
import MyDataFive from "./components/MyDataFive.vue";
import MyDataFour from "./components/MyDataFour.vue";
import MyDataOne from "./components/MyDataOne.vue";
import MyDataSeven from "./components/MyDataSeven.vue";
import MyDataSix from "./components/MyDataSix.vue";
import MyDataThree from "./components/MyDataThree.vue";
import MyDataTwo from "./components/MyDataTwo.vue";
import MapDisplay from "./components/MapDisplay.vue";
export default {
  components: {
    ParkingHeader,
    MyDataOne,
    MyDataTwo,
    MyDataThree,
    MyDataFour,
    MyDataFive,
    MyDataSix,
    MyDataSeven,
    SummaryBox,
    MapDisplay,
  },
  name: "",
  data() {
    return {
      sumInfodata: [],
    };
  },
  created() {
    this.sumInfodata = this.$window.sumInfolubian;
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/parkview.scss";
.data-box {
  padding: 0 8rem;
  position: relative;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-size: 100% 100%;
  // background-image: url("../../assets/img/Lark20210804-175231.png");
  background-color: #082578;
  #mapChart {
    position: absolute;
    width: 50%;
    height: 60%;
    // background-color: pink;
    top: 13%;
    left: 25%;
  }
  .income-analysis-content {
    position: absolute;
    top: 62rem;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.cherries {
  display: flex;
  justify-content: space-around;
  width: calc(100% - #{$-pv-sideWidth} - #{$-pv-sideWidth} - 32rem);
  max-width: calc(100% - #{$-pv-minWidth} - #{$-pv-minWidth} - 32rem);
  position: absolute;
  height: 10%;
  left: 50%;
  transform: translateX(-50%);
  top: 2%;
  // background-color: pink;
  .cherries-item {
    display: inline-block;
    width: 18%;
    height: 100%;
  }
}
.mydata1 {
  width: $-pv-sideWidth;
  min-width: $-pv-minWidth;
  height: 30%;
  position: absolute;
  top: 1%;
  left: 8rem;
}
.mydata2 {
  width: $-pv-sideWidth;
  min-width: $-pv-minWidth;
  height: 30%;
  position: absolute;
  top: 34%;
  left: 8rem;
}
.mydata3 {
  width: $-pv-sideWidth;
  min-width: $-pv-minWidth;
  height: 30%;
  position: absolute;
  top: 67%;
  left: 8rem;
}
.mydata4 {
  width: $-pv-sideWidth;
  min-width: $-pv-minWidth;
  height: 30%;
  position: absolute;
  top: 1%;
  right: 8rem;
}
.mydata5 {
  width: $-pv-sideWidth;
  min-width: $-pv-minWidth;
  height: 30%;
  position: absolute;
  top: 34%;
  right: 8rem;
}
.mydata6 {
  width: $-pv-sideWidth;
  min-width: $-pv-minWidth;
  height: 30%;
  position: absolute;
  top: 67%;
  right: 8rem;
}
.mydata7 {
  width: calc(100% - #{$-pv-sideWidth} - #{$-pv-sideWidth} - 32rem);
  max-width: calc(100% - #{$-pv-minWidth} - #{$-pv-minWidth} - 32rem);
  height: 30%;
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translateX(-50%);
}
</style>